import React from 'react';
import { Card, Modal, Button } from 'antd';
import PateoTable from '../../../components/common/PateoTable';
import PropTypes from "prop-types";



export default class BindDetailModal extends React.PureComponent {
  static contextTypes = {
    dicData: PropTypes.array,
  };
  state = {
    detailData: [],
  };
  componentWillReceiveProps(nextProps) {
    const { detailData } = nextProps;
    if (detailData.sid !== this.state.detailData.sid) {
      this.setState({ detailData });
    }
  };
  render() {
    const { changeVisible, detailData, dispatch } = this.props;
    const columns=[{
      title:'VIN',
      dataIndex:'vin',
      width: '20%'
    },{
      title:'手机号码',
      dataIndex:'phoneNumber',
      width: '20%'
    }, {
      title:'用户姓名',
      dataIndex:'certName',
      width: '20%'
    }, {
      title:'租赁开始时间',
      dataIndex:'beginTime',
      width: '20%'
    }, {
      title:'租赁结束时间',
      dataIndex:'endTime',
      width: '20%'
    }];
    const tableProps={
      columns,
      dataSource:detailData,
      rowKey:record =>record.sid,
      pagination: false,
      scroll:{x: 500, y: 500 },
    };
    return (
      <Modal
        title=""
        style={{ top: 80 }}
        width="50%"
        visible={this.props.visible}
        closable={false}
        onCancel={() => changeVisible()}
        maskClosable
        footer={<Button type="primary" onClick={() => changeVisible()}>返回</Button>}
      >
        <Card title="车辆绑定历史列表">
          <PateoTable
            tableProps={tableProps}
            dispatch={dispatch}
          />
        </Card>
      </Modal>
    );
  }
}
